<template>
  <div class="show-block resume-display-content" id="resume-display-content">
    <div class="modal" v-for="item in resumeList.filter(o => o.visible)" :key="item.id">
      <!-- 基本信息 -->
      <template v-if="item.component === 'BasicInfo'">
        <div class="resume-modal-basic-info">
          <div class="show-resume-header">
            <p class="show-resume-header-title">{{ item.title }}</p>
            <div class="LB-desc0"></div>
            <div class="LB-desc1"></div>
            <div class="LB-desc2"></div>
          </div>
          <div class="resume-content">
            <div class="left-info-list">
              <div
                class="info-list-item"
                v-for="(itemName, index) in item.data.list.slice(0, 2)"
                :key="index"
                :class="{ 'resume-name': index === 0, 'resume-job': index === 1 }">
                <div class="info-list-item__name">{{ itemName.fieldName }}</div>
                <em>：</em>
                <div class="info-list-item__value">{{ itemName.fieldValue }}</div>
              </div>
              <br />
              <div
                class="info-list-item"
                v-for="(itemName, index) in item.data.list.slice(2)"
                :key="index + 2">
                <div class="info-list-item__name">{{ itemName.fieldName }}</div>
                <em>：</em>
                <div class="info-list-item__value">{{ itemName.fieldValue }}</div>
              </div>
            </div>
            <div class="right-avatar" v-if="item.data.showAvatar">
              <img :src="item.data.avatar" alt="">
            </div>
          </div>
        </div>
      </template>

      <!-- 自定义信息 -->
      <template v-if="item.component === 'OtherInfo'">
        <div class="resume-modal-other-info">
          <div class="show-resume-header">
            <p class="show-resume-header-title">{{ item.title }}</p>
            <div class="LB-desc0"></div>
            <div class="LB-desc1"></div>
            <div class="LB-desc2"></div>
          </div>
          <div class="resume-content"
            v-for="(itemName, index) in item.data.list"
            :key="index">
            <div class="sub-top-title">
              <div class="label-item"
                v-for="(iitem, iidx) in itemName.order
                  .split(',')
                  .filter(o => itemName.visibleList.includes(o))
                  .filter(o => itemName[o].length)"
                :key="iidx">
                <p v-if="iitem !== 'time'">{{ itemName[iitem] }}</p>
                <p v-else>{{ `${itemName[iitem][0]} ~ ${itemName.rightNow ? '至今' : itemName[iitem][1]}` }}</p>
              </div>
            </div>
            <div
              v-show="itemName.editorHtml.replace(/<p><br><\/p>/gi, '')"
              class="edit-html-content wangeditor-show-html"
              v-html="itemName.editorHtml"></div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewResume',
  data () {
    return {
      themeColor: null,
      themeStyleName: null,
      resumeId: null,
      resumeList: []
    }
  },
  created () {
    this.resumeId = this.$route.params.id
    this.findResumeInfo()
  },

  methods: {
    async findResumeInfo () {
      try {
        const data = await this.$axios.get(`/gimishare/api/v1/resume/findById?id=${this.resumeId}`)
        const { content, themeColor, themeStyleName } = data.data || {}
        this.resumeList = JSON.parse(content)
        this.themeColor = themeColor
        this.themeStyleName = themeStyleName
        if (this.themeStyleName) {
          await this.loadResumeThemeCss()
          document.documentElement.style.setProperty('--resume-theme-color', themeColor)
        }
      } catch (e) {}
    },

    loadResumeThemeCss () {
      return new Promise(resolve => {
        this.removeResumeThemeCss()
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = `/resule-theme-style/${this.themeStyleName}.css`
        link.id = 'resume-theme-css'
        document.head.appendChild(link)
        link.addEventListener('load', function () {
          resolve()
        })
      })
    },

    removeResumeThemeCss () {
      const link = document.querySelector('link#resume-theme-css')
      if (link) {
        document.head.removeChild(link)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
